/**
 * Sample React Native App
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    ListView,
    Navigator,
} from 'react-native';

import Button from './src/component/button';
import Toast from 'react-native-root-toast';

let toast = Toast.show('This is a message', {
    duration: Toast.durations.LONG,
    position: Toast.positions.BOTTOM,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0,
    onShow: () => {
        // calls on toast\`s appear animation start
    },
    onShown: () => {
        // calls on toast\`s appear animation end.
    },
    onHide: () => {
        // calls on toast\`s hide animation start.
    },
    onHidden: () => {
        // calls on toast\`s hide animation end.
    }
});

export default class AwesomeProject extends Component {
    //构造函数
    constructor(props){
        super(props);
        //初识数据
        this.state={
            status:'ok',
            image:''
        };
    };
    fetchData = (callback)=>{
        //获取之后启用按钮

        fetch('https://mobile-interface.veryeast.cn/client/util/ads', {
            method: 'POST',
            // headers: {
            //     'Content-Type': 'application/x-www-form-urlencoded',
            // // },
            // body: JSON.stringify({
            //     firstParam: 'yourValue',
            //     secondParam: 'yourOtherValue',
            // })
        })
        .then((response) => response.json())
        .then((responseJson) => {
            callback();
            if( responseJson.data[0].images ){
                this.setState({
                    image : responseJson.data[0].image
                });
            } else {
                Toast.show('数据有误！');
            }
        })
        .catch((error) => {
            console.error(error);
        });
    };
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    };
    render() {
        return (
            <View style={styles.container}>
                {/*
                props 属性
                 ref 相当于html中的id，标记和引用组件
                */}
                <Text>{this.state.image}</Text>
                <Image style={styles.image} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
                <Button text="提交" ref="button" click={this.fetchData} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  name: {
      color: 'red',
  },
  image:{
      width:200,
      height:160,
      marginTop:100,
  }


});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
